<template>
	<view class="job-list">
		<view class="scroll-view-item" v-for="(item, index) in list" :key="item.id">
			<navigator :url="`/pages/job/detail?id=${item.id}&friendId=${item.user.id}`" hover-class="none">
				<view class="title">
					<text class="name">{{ item.position.name }}</text>
					<text class="salary">{{ item.salary }}</text>
				</view>
				<view class="company-info">
					<text class="name">{{ item.company.name }}</text>
					<text class="line"></text>
					<text class="scale">{{ item.company.scale }}</text>
					<text class="line"></text>
					<text class="nature">{{ item.company.nature }}</text>
				</view>
				<view class="job-info">
					<text class="experience">{{ item.experience }}</text>
					<text class="education">{{ item.education }}</text>
				</view>
				<view class="user-info">
					<view class="avatar"><image :src="item.user.avatar" mode="aspectFill"></image></view>
					<text class="name">{{ item.user.nickname }}</text>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: Array,
		default: () => {
			return [];
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.job-list {
	padding: 0 20rpx;
}
.scroll-view-item {
	padding: 10rpx 30rpx;
	margin: 0 4rpx;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	background-color: #fff;
	.title {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 36rpx;
		font-weight: bold;
		.salary {
			font-size: 32rpx;
			color: $main-color;
		}
	}
	.company-info {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #606266;
		margin-bottom: 20rpx;
		.line {
			width: 4rpx;
			height: 20rpx;
			margin: 0 15rpx;
			background-color: #ccc;
		}
	}
	.job-info {
		display: flex;
		font-size: 24rpx;
		line-height: 1.8;
		text {
			padding: 0 10rpx;
			margin-right: 16rpx;
			border-radius: 5rpx;
			color: #666;
			background-color: #ebeef5;
		}
	}
	.user-info {
		display: flex;
		align-items: center;
		margin: 20rpx 0 30rpx;
		.avatar image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 100%;
			margin-right: 20rpx;
		}
	}
}
</style>
